<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 50% ; width:50% }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC3p82z0b3vMRaVbnplJiNheKfsAyccmJQ&sensor=true">
    </script>
    <script>
      function initialize() {
        var mapOptions = {
          center					:new google.maps.LatLng(-36.770294,174.737978),
					zoom						:10,
					mapTypeId				:google.maps.MapTypeId.ROADMAP,
					disableDefaultUI:true
        };
        var image = 'images/calendar.gif';
      	var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
				var marker = new google.maps.Marker({
    					position	:new google.maps.LatLng(-36.770294,174.737978),
    					title			:"Sign Of The Times\nHead Office",
 							icon			:image
						});                             
				marker.setMap(map);                             
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>